import {useState,FC,useEffect} from 'react'
import { useSearchParams,useLocation,useNavigate } from 'react-router-dom';
import { Pagination } from 'antd';


type PropsType = {
    total:number
}

const PaginationList:FC<PropsType> = (props:PropsType)=>{
    const [searchParams,setSearchParams] = useSearchParams()
    const [current,setCurrent] = useState(1)
    const [pageSize,setPageSize] = useState(10)
    const {pathname}= useLocation()
    const nav = useNavigate()
    useEffect(()=>{
        const page = parseInt(searchParams.get('page') as string) || 1
        const size = parseInt(searchParams.get('size') as string) || 10
        setCurrent(page)
        setPageSize(size)
    },[searchParams])

    const onChangePagition = (page:number,size:number)=>{
      // 搜索，并传入分页
        setCurrent(page)
        setPageSize(size)
        searchParams.set("page",page.toString())
        searchParams.set("size",size.toString())
        // 跳转路由
        nav({
            pathname,
            search:searchParams.toString()
        })
    }
    return <>
         <Pagination style={{marginTop:"30px",textAlign:"center"}} showQuickJumper current={current} pageSize={pageSize} defaultCurrent={1} total={props.total} onChange={onChangePagition} />
    </>
}

export default PaginationList